<template>
  <div class="project-Container">
    <div class="head">
      <div class="opt">
        <el-button type="primary" @click="dialogAdd = true">新增用户</el-button>
      </div>
    </div>
    <el-table :data="List" border style="width: 100%">
      <el-table-column prop="index" label="序号" width="120"></el-table-column>
      <el-table-column prop="roleName" label="角色"></el-table-column>
      <el-table-column prop="money" label="用户余额"></el-table-column>
      <el-table-column prop="nikename" label="用户昵称"></el-table-column>
      <el-table-column prop="phone" label="手机号码"></el-table-column>
      <!-- <el-table-column label="用户头像">
        <template slot-scope="scope">
          <img :src="`http://www.jfqiandai.com/file${scope.row.pic}`" style="width:80px">
        </template>
      </el-table-column>-->
      <!-- <el-table-column prop="userSign" label="签名"></el-table-column> -->
      <el-table-column label="认证状态">
        <template slot-scope="scope">
          <el-button type="text" v-show="scope.row.certStatus == 0">未认证</el-button>
          <el-button type="text" v-show="scope.row.certStatus == 1">已认证</el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="handleExChange(scope.row)">更改角色</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="paginat">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage4"
        :page-size="10"
        layout="total, prev, pager, next"
        :total="total"
      ></el-pagination>
    </div>

    <!-- 新增用户 -->
    <el-dialog title="新增用户" @close="Cancel" :visible.sync="dialogAdd" width="30%">
      <!-- :rules="rules" -->
      <el-form
        :model="ruleForm"
        ref="ruleForm"
        :rules="rules"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="昵称" prop="nikename">
          <el-input v-model="ruleForm.nikename" placeholder="请输入昵称"></el-input>
        </el-form-item>

        <el-form-item label="电话" prop="phone">
          <el-input v-model.number="ruleForm.phone" placeholder="请输入电话"></el-input>
        </el-form-item>

        <el-form-item label="密码" prop="password">
          <el-input v-model="ruleForm.password " placeholder="请输入密码" type="password"></el-input>
        </el-form-item>

        <div style="text-align:right;">
          <el-button @click="Cancel">取 消</el-button>
          <el-button type="primary" @click.native="addClick('ruleForm')">确 定</el-button>
        </div>
      </el-form>
    </el-dialog>

    <!-- 修改角色 -->
    <el-dialog title="修改角色" @close="Cancel" :visible.sync="dialogExChange" width="30%">
      <div style="width:100%;padding:2px" v-for="item in RoleList" :key="item.roleId">
        <el-radio v-model="radio" :label="item.roleId">{{item.roleName}}</el-radio>
      </div>

      <div style="text-align:right;">
        <el-button @click="Cancel">取 消</el-button>
        <el-button type="primary" @click.native="exChangeClick()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    var checkPhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("电话号码不能为空"));
      } else if (!Number.isInteger(value)) {
        return callback(new Error("请输入数字"));
      } else if (String(value).length != 11) {
        return callback(new Error("请输入11位电话号码"));
      } else {
        callback();
      }
    };
    return {
      RoleList: [],
      search: "",
      List: [],
      total: 0,
      val: 1, //当前多少页
      currentPage4: 1,
      dialogAdd: false,
      ruleForm: {
        nikename: "",
        phone: "",
        password: ""
      },
      rules: {
        nikename: [
          { required: true, message: "请输入昵称", trigger: "blur" },
          { max: 20, message: "输入内容过长", trigger: "blur" }
        ],
        phone: [{ validator: checkPhone, required: true, trigger: "blur" }],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { max: 20, message: "输入内容过长", trigger: "blur" }
        ]
      },
      //修改角色
      dialogExChange: false,
      radio: "",
      exEditId: ""
    };
  },
  created() {
    this.getRoleList();
    this.getList();
  },
  methods: {
    //角色查询
    getRoleList() {
      let url = "/sysRole/getList";
      this.httpPost(url, {}, res => {
        this.RoleList = res.data.list;
      });
    },
    //更改角色
    handleExChange(row) {
      this.dialogExChange = true;
      this.exEditId = row.id;
      this.radio = row.roleId;
    },
    //角色确定
    exChangeClick() {
      // console.log(this.radio);
      let url = "/sysRole/editAdminRole";
      let params = {
        roleId: this.radio,
        userId: this.exEditId
      };
      this.httpPost(url, params, res => {
        if (res.code == 200) {
          this.$message({
            message: "修改成功",
            type: "success"
          });
          this.dialogExChange = false;
          this.getList();
          this.ruleForm.nikename = "";
          this.ruleForm.phone = "";
          this.ruleForm.password = "";
        }
      });
    },
    //取消
    Cancel() {
      this.dialogAdd = false;
      this.dialogExChange = false;
    },
    //添加
    addClick(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let url = "/user/add";
          let params = {
            nikename: this.ruleForm.nikename,
            phone: this.ruleForm.phone,
            password: this.ruleForm.password
          };
          this.httpPost(url, params, res => {
            if (res.code == 200) {
              this.$message({
                message: "新增成功",
                type: "success"
              });
              this.dialogAdd = false;
              this.getList();
              this.ruleForm = {};
            } else {
              this.$message({
                message: res.message,
                type: "warning"
              });
            }
          });
        }
      });
    },
    //获取数据
    getList() {
      let url = "/user/getList";
      let params = {
        pageNum: this.val,
        pageSize: 10
      };
      this.httpPost(url, params, res => {
        if (res.code == 200) {
          this.List = res.data.list;
          this.total = res.data.total;
          this.val = this.val == "" ? 1 : this.val;
          this.List.forEach((element, i) => {
            this.List[i].index = (this.val - 1) * 10 + i + 1;
          });
        }
      });
    },
    //分页
    handleCurrentChange(val) {
      this.val = val;
      this.getList();
      console.log(`当前页: ${val}`);
    }
  }
};
</script>

<style lang="scss" scoped>
.head {
  height: 60px;
  width: 100%;
}
</style>

